import { PureComponent } from 'react';
import {
  Scene, OrthographicCamera, BoxGeometry,
  MeshLambertMaterial, Mesh, WebGLRenderer, DirectionalLight
} from 'three';

class Index extends PureComponent {

  componentDidMount() {
    const scene = new Scene();

    const camera = new OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
    camera.position.set(5, 5, 20);
    camera.lookAt(0, 0, 0);

    const geometry = new BoxGeometry(1, 2, 3);

    const light = new DirectionalLight(0xffffff);
    light.position.set(20, 10, 5);
    scene.add(light);

    const material = new MeshLambertMaterial({
      color: 0xffff00
    });

    const mesh = new Mesh(geometry, material);
    scene.add(mesh);

    //在mesh创建之后修改它的材质
    mesh.material = new MeshLambertMaterial({
      color: 0xff0000
    });

    const renderer = new WebGLRenderer({
      canvas: document.getElementById('mainCanvas')
    });

    renderer.render(scene, camera);

  }

  render() {

    return (
      <canvas
        id="mainCanvas"
        width="400"
        height="300"
      />
    );
  }
}

export default Index;